<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Cube</title>
    <style>
        .dv {
            width: 200px;
            height: 200px;
            position: relative;
            margin: 200px auto;
            /*transform: rotate3d(1,1,0,-30deg);     !*制作时进行辅佐的*!*/
            transform-style: preserve-3d;
            transition: all 8s;        /*进行旋转*/
            /*perspective: 100px;       !*   透视的效果，101px则是距离立方体1px进行观察 *!*/
            /*perspective-origin: 0px 0px;    !*观察原点*!*/
        }
        .dv:hover{

            transform :rotateX(360deg) rotateY(360deg);

        }
        .dv div {
            width: 200px;
            height: 200px;
            position: absolute;
            top:0;
            left: 0;
            opacity: 0.5;
        }
        .mian1 {
            background-color: red;
            transform: translateZ(-100px);
        }
        .mian2 {
            background-color: orange;
            transform: translateZ(100px) ;
        }
        .mian3 {
            background-color: yellow;
            transform: translateX(100px) rotateY(-90deg);
        }
        .mian4 {
            background-color: green;
            transform: translateX(-100px) rotateY(90deg);
        }
        .mian5 {
            background-color: blue;
            transform: translateY(100px) rotateX(-90deg);
        }
        .mian6 {
            background-color: purple;
            transform: translateY(-100px) rotateX(90deg);
        }

    </style>
</head>
<body>
<div class="dv">
    <div class="mian1">mian1</div>
    <div class="mian2">mian2</div>
    <div class="mian3">mian3</div>
    <div class="mian4">mian4</div>
    <div class="mian5">mian5</div>
    <div class="mian6">mian6</div>
</div>
</body>
</html>